<template>
  <div class="btn-warpper form-small">
    <el-select
      v-model="form.groupCategory"
      placeholder="请选择参赛组别"
      @change="groupSelectChange"
    >
      <el-option label="小学组" value="小学组" />
      <el-option label="初中组" value="初中组" />
      <el-option label="高中组" value="高中组" />
    </el-select>
    <el-select
      v-if="showBatchNo"
      v-model="form.batchNo"
      placeholder="请选择批次"
      class="batch-no-select"
      @change="batchSelectChange"
    >
      <el-option
        v-for="(batch, index) in uniqueBatchNoList"
        :key="index"
        :label="batch"
        :value="batch"
      />
    </el-select>
    <el-select
      v-if="showStatus"
      v-model="form.status"
      placeholder="请选择比赛阶段"
      class="batch-no-select"
      @change="selectChange"
    >
      <el-option
        v-for="(batch, index) in statusList"
        :key="index"
        :label="batch.label"
        :value="batch.type"
      />
    </el-select>
    <el-input
      v-if="showStudentInfo"
      v-model="form.studentInfo"
      placeholder="请输入姓名"
    />
    <el-input
      v-model="form.regNo"
      class="people-number"
      placeholder="请输入报名编号"
    />
    <el-button type="primary" class="button-search" @click="handleSearch"
      >查询</el-button
    >
  </div>
</template>

<script setup>
import { reactive, defineProps, defineEmits, watch, computed } from 'vue'

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({
      groupCategory: '小学组',
      studentInfo: '',
      regNo: '',
      batchNo: '',
      status: '',
    }),
  },
  batchNoList: {
    type: Array,
    default: () => [],
  },
  statusList: {
    type: Array,
    default: () => [],
  },
  showStatus: {
    type: Boolean,
    default: false,
  },
  showBatchNo: {
    type: Boolean,
    default: false,
  },
  showStudentInfo: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits([
  'update:modelValue',
  'update:batchNoList',
  'search',
  'refresh',
  'batchNoChange',
])

// 创建一个本地响应式对象
const form = reactive({ ...props.modelValue })

// 监听外部数据变化
watch(
  () => props.modelValue,
  (newVal) => {
    Object.assign(form, newVal)
  },
  { deep: true }
)

// 监听本地数据变化
watch(
  form,
  (newVal) => {
    emit('update:modelValue', { ...newVal })
  },
  { deep: true }
)

const handleSearch = () => {
  emit('search', form)
}

// 添加计算属性进行去重
const uniqueBatchNoList = computed(() => {
  const seen = new Set()
  return props.batchNoList.filter((item) => {
    const value = typeof item === 'object' ? item.value || item.label : item
    if (seen.has(value)) {
      return false
    }
    seen.add(value)
    return true
  })
})
const selectChange = (val, key) => {
  handleSearch()
}
const batchSelectChange = (val, key) => {
  emit('batchNoChange', val)
}
const groupSelectChange = (val, key) => {
  emit('refresh')
}
</script>

<style lang="scss" scoped>
.btn-warpper {
  display: flex;
  .el-select {
    width: 90px;
    margin-right: 10px;
  }
  .el-input {
    width: 90px;
    margin-right: 15px;
    &.people-number {
      width: 110px;
    }
  }
  .batch-no-select {
    width: 120px;
  }
}
</style>
